<template>
	<div class="center">
	    <div class="cTitle">
	      <div class="title">每日发电量统计</div>
	      <div class="edhengxian"></div>    
	    </div>
	    <div class="chart">
	      <Chart />
	    </div>
	  </div>
</template>

<script>
	 import Chart from './piechart.vue';
	 export default {
		 data(){
			 return {}
		 },
		 components:{
			 Chart
		 }
		
	 }
</script>

<style lang="less" scoped>
	 .center {
	    width: 100%;
	    height: 100%;
	    .cTitle {
	      display: flex;
	      flex-direction: column;
	      .title {
	        color: #fff;
	        // font-size: 20px;
			font-size: 2vh;
	        font-weight: bold;
	        margin: 0 0 8px 8px;
	      }
	    }
	    .chart {
	      width: 100%;
	      height: 86%;
		  // background-color: #94f2ff;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      // margin-left: 1.6%;
	      div {
	        width: 100%;
	        height: 100%;
	      }
	    }
		
		.edhengxian {
			position: relative;
			width: 96%;
			height: 1px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.3);
		}
		
		.edhengxian::before {
			position: absolute;
			top: -2px;
			left: 0;
			background-color: #94f2ff;
			box-shadow: 0px 0px 5px 1px #e5e9e7;
			content: '';
			height: 4px;
			width: 30px;
			border-radius: 1px;
			z-index: 2;
		}
		
		.edhengxian::after {
			position: absolute;
			top: -1px;
			right: 0;
			background-color: #76828f;
			opacity: 1;
			content: '';
			height: 3px;
			width: 15px;
			z-index: 2;
		}
	  }
</style>